import React, { useEffect, useMemo, useState } from 'react'
import { Breadcrumb, Layout, theme } from 'antd'
import MyMenu from './component/MyMenu/MyMenu'
import Logo from '@/component/common/logo/Logo'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import { managementMenu } from '@/router'
import honeApi from './api'
import { ArrowRightOutlined } from '@ant-design/icons'
import cookie from 'react-cookies'
import './index.scss'
const { Header, Content, Sider } = Layout

const Home: React.FC = () => {
  const navigate = useNavigate()
  const [collapsed, setCollapsed] = useState<boolean>(false)

  const curPath = useLocation()
  const Breadcrumbs = useMemo(() => {
    const curPathMsg = managementMenu.find((item) => {
      return curPath.pathname.includes(item.path)
    })
    return (
      <Breadcrumb
        items={[
          { title: '数据板', href: '/home' },
          {
            title: `${curPathMsg?.handle.name}`,
            href: `/home/${curPathMsg?.path}`,
          },
        ]}
        style={{ height: '3rem', lineHeight: '3rem' }}></Breadcrumb>
    )
  }, [curPath])
  useEffect(() => {
    const getUserInfo = () => {
      honeApi.getUserInfo().then((data) => {
        sessionStorage.setItem('userInfo', JSON.stringify(data))
      })
    }
    getUserInfo()
  }, [])
  return (
    <Layout
      style={{
        minHeight: '100vh',
        background:
          'linear-gradient(135deg, #FFC0CB 0%, #FFF0F5 100%)',
        backdropFilter: 'blur(10px)',
        backgroundColor: '#c22426',
      }}>
      <Sider
        collapsible
        collapsed={collapsed}
        style={{
          backgroundColor: 'transparent',
        }}
        onCollapse={(value) => setCollapsed(value)}>
        <Logo width={40} margin={'20px 0'} showtext={collapsed ? 0 : 1}></Logo>
        <MyMenu></MyMenu>
      </Sider>
      <Layout style={{ backgroundColor: 'transparent' }}>
        <Header
          style={{
            padding: 0,
            height: '8vh',
            minHeight: '3rem',
            display: 'flex',
            backgroundColor: 'transparent',
          }}>
          <div
            className="logout"
            onClick={() => {
              sessionStorage.clear()
              cookie.remove('token')
              navigate('/login', { replace: true })
            }}>
            <span>
              退出登录
              <ArrowRightOutlined />
            </span>
          </div>
        </Header>
        <Content className="content-box">
          {Breadcrumbs}
          <div className="content">
            <Outlet></Outlet>
          </div>
        </Content>
      </Layout>
    </Layout>
  )
}

export default Home
